import React, {Component} from 'react';
import BreadcrumbCustom from '../../components/BreadCrumb';
import ListItem from './child/listItem';
import './index.less'

import axios from 'axios' ;
import { Pagination } from 'antd';

class HttpServer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newsList: [],
      pageTotal: 1,
      pageCurrent: 1,
      pageSize: 5,
    }
  }
  // state = {
  //   newsList: [],
  //   pageTotal: 1,
  // }

  componentWillMount() {
    // this.getList()
    this.getData(1)
  }

  // 不封装 axios (直接调用)
  getList() {
    let url="http://shanzhouweb.yewu99.com:1103/szweb/list"
    axios.post(url)
      .then(function (response) {
        let data =response.data
        console.log(data);
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  getData = (page) => {
    try {
      this.$api.getNewsList({
        num: 5,
        page: page
      }).then(res => {
        let data = res.data
        console.log(data)
        if(res.code === 1) {
          this.setState({
            pageTotal: data.total, 
            newsList: data.list         
          })
          // console.log(data.total)
          // console.log(this.state.pageTotal)
        } else {
          console.log(data.msg)
        }
      })
    } catch(e) {
      console.log(e)
    }
  }
  
  changePage = pageNumber => {
    this.setState({
      newsList: [],
      pageCurrent: pageNumber
    })
    this.getData(pageNumber)
  }

  render() {
    return (
      <div>
        <BreadcrumbCustom paths={['index', 'nav2', 'axios']} />
        <div>http data</div>
        {/* <button onClick={(pageNumber) => this.changePage(pageNumber)}>changePage</button> */}
        <div className="sec1-main">
          {/* <ListItem /> */}
          {
            this.state.newsList.map( (v, i) => {
              return <ListItem key={i} index={i} 
                      title={v.title} text={v.details} 
                      time={v.updateTime} catId={v.catId} img={v.picUrl} 
                      pageCurrent={this.state.pageCurrent} />
            })
          }
        </div>
        <Pagination 
          current={this.state.pageCurrent} 
          total={this.state.pageTotal} 
          pageSize={this.state.pageSize}
          onChange={this.changePage} />
      </div>
      
    )

  }

}

export default HttpServer;